<!-- 库存销量分析 -->
<template>
  <div class="two-container">
    <div class="two-chart" ref="columnCharts"></div>
  </div>
</template>

<script>
import { getstudentManage } from "@/api/statistical/grow";

export default {
  props: {
    galleryId: {
      type: "",
    },
  },
  data() {
    return {
      chartInstance: null,
      gradeId: this.galleryId,
    };
  },

  async mounted() {
    this.initChart();
    this.getclasslist();
  },

  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.columnCharts, "chalk");
      const initOption = {};
      this.chartInstance.setOption(initOption);
    },

    async getclasslist() {
      const res = await getstudentManage(this.gradeId);
      this.updateChart(res.rows[0]);
    },

    updateChart(data) {
      console.log(data, 'datadatatt')
      let onedata = [
        "学生素养报告单",
        "教师寄语",
        "我和我的伙伴",
        "我的荣誉",
        "学期小结",
        "十能成长目录",
        "个性",
      ];
      let ydata = [];
      let xdata = [];
      let Color = [
        "#D95040",
        "#5087EC",
        "#68BBC4",
        "#58A55C",
        "#F2BD42",
        "#A1DEED",
        "#709B94",
      ];
      for ( const index in onedata ) {
        for (let key in data) {
          if ( onedata[index] == key) {
            xdata.push(key);
            ydata.push(data[key]);
          }
        }
      }

      const dataOption = {
        grid: {
          left: 20,
          right: 20,
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: xdata,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              color: "#666",
              rotate: 30,
              padding: [40, -20, 0, 0]
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              color: "#666",
            },
          },
        ],
        series: [
          {
            name: "lastMonth",
            type: "bar",
            barWidth: 30, //柱图宽度
            data: ydata,
            label: {
              show: true,
              position: "top",
              formatter: (params) => {
                return params.data + "人";
              },
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return Color[params.dataIndex];
                },
                borderRadius: [5, 5, 0, 0],
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
  },
};
</script>

<style >
.two-container {
  margin: 1rem;
}

.two-chart {
  width: 34rem;
  height: 12.5rem;
}
</style>
